<template>
  <div class="page">
    <div class="bg-white pd pdb-0">
      <input type="text" class="fs-2 fw" placeholder="请输入作业标题" placeholder-class="holder" :value="name" @input="onNameUpdate">
    </div>
    <div class="pdh pdt">
      <div style="border-bottom: 1px dashed #ddd;"></div>
    </div>
    <div class="block-form bg-white">
      <div class="pd" style="min-height: 200px;padding-left:13px;">
        <textarea v-if="!isModel" type="text" placeholder="请输入作业内容"
          :value="contentBlock.value" @input="onContentUpdate"
          :auto-height="true"
          maxlength="-1"
          placeholder-class="holder" style="min-height:200px;"/>
        <text class="txt" :class="{'c-gray': !contentBlock.value}"
          style="position: relative;top: -3px;padding-bottom: 3px;min-height:188px;"
          v-if="isModel">{{contentBlock.value || '请输入作业内容'}}</text>
      </div>
      <blocks-editor @change="onBlocksChange" :fastReplyPicker="false"
        :defaultValue="blocks"
      ></blocks-editor>
    </div>
    <div v-if="operation == 'modify'" class="pd" style="padding-top: 0;">
      <div class="weui-flex bd-b pdv">
        <div class="weui-flex__item">截止时间</div>
        <div class="weui-flex__item ta-r">
          <date-time v-model="endAt"></date-time>
        </div>
      </div>
      <div class="weui-flex bd-b pdv" :class="{'c-gray': task.isPublished}">
        <div class="weui-flex__item">布置时间</div>
        <div class="weui-flex__item ta-r">
          <date-time v-if="!task.isPublished" v-model="prePublishAt"></date-time>
          <span v-else>已发送</span>
        </div>
      </div>
      <div class="weui-flex bd-b pdv c-gray">
        <div class="weui-flex__item">班级</div>
        <div class="weui-flex__item ta-r">
          <span v-if="task.group && task.group.name">{{task.group.name}}</span>
          <open-data v-if="task.group && !task.group.name && task.group.openGroupId"
            type="groupName" :open-gid="task.group.openGroupId"></open-data>
        </div>
      </div>
    </div>
    <div class="fix-bottom">
      <notify-btn v-if="operation == 'modify'" :disabled="!isSaveAble"
        cls="ui btn primary no-rounder" @hit="onSave">保存</notify-btn>
      <notify-btn v-else :disabled="!isSaveAble"
        cls="ui btn primary no-rounder" @hit="goPreview">预览</notify-btn>
    </div>
    <page-common></page-common>
  </div>
</template>

<script>
import PageCommon from '@/components/page-common'
import BlocksEditor from '@/components/blocks-editor'
import NotifyBtn from '@/components/notify-btn'
import DateTime from '@/components/datetime'
import { mapActions, mapState, mapGetters } from 'vuex'
import base from '@/mixins/base'
import dayjs from 'dayjs'
import * as _app from '@/utils/app'
import * as $task from '@/api/task'
export default {
  mixins: [base],
  data () {
    return {
      endAt: '',
      prePublishAt: '',
    }
  },
  components: {
    PageCommon,
    BlocksEditor,
    NotifyBtn,
    DateTime
  },
  computed: {
    ...mapGetters([
      'isModel'
    ]),
    ...mapGetters('task', [
      'task'
    ]),
    ...mapGetters('document', [
      'isCreateAble',
      'document',
      'name',
      'operation'
    ]),
    ...mapState('document', [
      'contentBlock'
    ]),
    isSaveAble () {
      if (!this.name) return false
      if (!this.isCreateAble) return false
      return true
    },
    blocks () {
      let t = _app.getMediaBlocksFromBlocks(this.document.data.blocks)
      return t
    },
  },
  methods: {
    onPageShow () {
      if (this.task) {
        this.endAt = this.task.expireAt
        this.prePublishAt = this.task.prePublishAt
      }
      if (this.operation === 'modify') {
        wx.setNavigationBarTitle({
          title: '修改作业'
        })
      }
    },
    ...mapActions([
      'setBlocks',
    ]),
    ...mapActions('document', [
      'updateName',
      'updateContent',
    ]),
    async goPreview() {
      if (!this.isSaveAble) return
      wx.navigateTo({
        url: '/pages/document-preview/main'
      })
    },
    async onSave() {
      try {
        if (!this.isSaveAble) return
        let flag = await this.modifyTask()
        if (!flag) return
        let document = await this.$store.dispatch('document/onCreate', {endAt: this.endAt || null})
        this.$store.commit('task/TASK_UPDATE_TASKS_DOCUMENT', {id: this.task.id, document})
        this.$store.commit('UI_SET_TOAST_SUCCESS_MSG', '保存成功')
        wx.navigateBack()
      } catch (e) {
        this.$debug({err: e})
      }
    },
    onNameUpdate(e) {
      this.updateName(e.target.value)
    },
    onBlocksChange (blocks) {
      this.setBlocks(blocks)
    },
    onContentUpdate(e) {
      this.updateContent(e.target.value)
    },
    async modifyTask () {
      let ct = dayjs()
      let endAt = this.endAt
      let prePublishAt = this.prePublishAt
      if (endAt) {
        let flag = ct.isBefore(dayjs(endAt))
        if (!flag) {
          this.$store.commit('UI_SET_TOAST_WARNING_MSG', '截止时间必须大于当前时间！')
          return false
        }
      }

      if (prePublishAt) {
        let _endAt = dayjs(endAt)
        let _prePublishAt = dayjs(prePublishAt)
        let flag = _endAt.isBefore(_prePublishAt)
        if (flag) {
          this.$store.commit('UI_SET_TOAST_WARNING_MSG', '预发布时间必须小于截止时间')
          return false
        }
        // flag = ct.isBefore(_prePublishAt)
        // if (!flag) {
        //   this.$store.commit('UI_SET_TOAST_WARNING_MSG', '预发布时间必须大于当前时间')
        //   return false
        // }
      }
      await $task.modify({taskId: this.task.id, endAt: endAt || null, prePublishAt})
      let task = this.task
      task.expireAt = endAt
      if (!task.isPublished) {
        task.prePublishAt = prePublishAt
      }
      this.$store.commit('task/TASK_SET_TASK', task)
      return true
    }
  },
}
</script>

<style scoped>
.block-form{
  border-bottom: 1px solid #eee
}
textarea, text.txt {
  margin: 0;
  display: block;
  padding: 0;
  border: none;
  padding-bottom: 20px;
  font-size: 16px;
}
text.txt {
  padding-top: 8px;
  padding-left: 5px;
}
i.icon-del {
  font-size: 24px;
  color: red;
}
input {
  font-size: 18px;
}
</style>
